<template>
  <el-collapse v-if="word" v-model="localActiveCollapse" @change="handleCollapseChange">
    <el-collapse-item name="definition">
      <template #title>
        <strong>{{ word.word }}</strong>
        <el-tag v-if="word.ielst === 'YES'" type="success" size="small" style="margin-left: 10px">
          雅思词汇
        </el-tag>
      </template>
      <div v-if="word.trans" class="word-translation">
        <strong>翻译:</strong> {{ word.trans }}
      </div>
      <div v-if="word.phonetic" class="word-phonetic">
        <strong>音标:</strong> {{ word.phonetic }}
      </div>
      <slot name="actions">
        <WordActions
          :word="word"
          :show-toggle-status-button="showToggleStatusButton"
          :show-pronunciation-button="showPronunciationButton"
          @toggle-status="$emit('toggle-status', $event)"
          @play-pronunciation="$emit('play-pronunciation', $event)"
        />
      </slot>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import WordActions from './WordActions.vue';

export default {
  name: 'WordDisplay',
  components: {
    WordActions
  },
  props: {
    word: {
      type: Object,
      required: true
    },
    showToggleStatusButton: {
      type: Boolean,
      default: true
    },
    showPronunciationButton: {
      type: Boolean,
      default: true
    },
    activeCollapse: {
      type: [String, Array],
      default: 'definition'
    }
  },
  
  data() {
    return {
      localActiveCollapse: this.activeCollapse
    };
  },
  
  watch: {
    activeCollapse(newVal) {
      this.localActiveCollapse = newVal;
    }
  },
  
  emits: ['toggle-status', 'play-pronunciation', 'update:activeCollapse'],
  
  methods: {
    handleCollapseChange(val) {
      this.localActiveCollapse = val;
      this.$emit('update:activeCollapse', val);
    }
  }
};
</script>